<template>
  <div v-hasPermi="['system:index:page']" class="app-container home">
    <el-card class="box-card" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in statisticObj" :key="index" :span="4" style="margin-bottom: 20px">
          <el-statistic group-separator="," :value="item.value" :title="item.title"></el-statistic>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="12">
          <div id="myChart" style="height: 450px"></div>
        </el-col>
        <el-col :span="12">
          <div id="myChartMain" style="height: 450px"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup name="Index" lang="ts">
import { queryDataVo, queryUserVoList, queryDaily } from '@/api/login';
import { parseTime } from '@/utils/ruoyi';
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption,
  GridComponent,
  TitleComponent,
  DataZoomComponent
} from 'echarts/components';
import { PieChart, PieSeriesOption, BarChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout, BarChart, GridComponent, TitleComponent, DataZoomComponent]);

type EChartsOption = echarts.ComposeOption<TooltipComponentOption | LegendComponentOption | PieSeriesOption>;

const initZhu = (data) => {
  var chartDom = document.getElementById('myChart')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '各地区人数',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data
      }
    ]
  };

  option && myChart.setOption(option);
};

const goTarget = (url: string) => {
  window.open(url, '__blank');
};

const statisticObj = ref([
  {
    key: 'scrollPrice',
    value: 0,
    title: 'SCR实时价'
  },
  {
    key: 'szpnPrice',
    value: 0,
    title: 'SZPN实时价'
  },
  {
    key: 'todayWithdrawUsdtAmount',
    value: 0,
    title: '今日提现(U)'
  },
  {
    key: 'todayWithdrawAleoAmount',
    value: 0,
    title: '今日提现(A)'
  },
  {
    key: 'todayWithdrawScrAmount',
    value: 0,
    title: '今日提现(S)'
  },
  {
    key: 'totalWithdrawAleoAmount',
    value: 0,
    title: '累计提现(U)'
  },
  {
    key: 'totalWithdrawAleoAmount',
    value: 0,
    title: '累计提现(A)'
  },
  {
    key: 'totalWithdrawScrAmount',
    value: 0,
    title: '累计提现(S)'
  },
  // {
  //   value: 0,
  //   title: 'Aleo价格'
  // },
  {
    key: 'remainingUsdtAmount',
    value: 0,
    title: '剩余库存(U)'
  },
  {
    key: 'todayMiningAleAmount',
    value: 0,
    title: '今日产出(A)'
  },
  {
    key: 'totalMiningAleAmount',
    value: 0,
    title: '累计产出(A)'
  },
  {
    key: 'remainingAleoAmount',
    value: 0,
    title: '剩余库存(A)'
  },
  {
    key: 'todayMiningScrAmount',
    value: 0,
    title: '今日产出(S)'
  },
  {
    key: 'totalMiningScrAmount',
    value: 0,
    title: '累计产出(S)'
  },
  {
    key: 'remainingSrcAmount',
    value: 0,
    title: '剩余库存(S)'
  },

  {
    key: 'totalFeeUsdtAmount',
    value: 0,
    title: '累计手续费（U）'
  },
  {
    key: 'totalFeeAleoAmount',
    value: 0,
    title: '累计手续费（A）'
  },
  {
    key: 'totalFeeScrAmount',
    value: 0,
    title: '累计手续费（S）'
  },
  {
    key: 'todayUserAmount',
    value: 0,
    title: '今日新增会员'
  },
  {
    key: 'newUserNum',
    value: 0,
    title: '新会员数量'
  },
  {
    key: 'oldUserNum',
    value: 0,
    title: '老用户数量'
  },
  {
    key: 'totalUserAmount',
    value: 0,
    title: '平台总会员'
  },
  {
    key: 'todayInvestAmount',
    value: 0,
    title: '今日新增购买'
  },
  {
    key: 'totalInvestAmount',
    value: 0,
    title: '累计购买'
  },
  {
    key: 'totalComputility',
    value: 0,
    title: '全网总算力'
  },
  {
    key: 'oldUserComputility',
    value: 0,
    title: '老用户算力拨出'
  },
  {
    key: 'marketAllowanceAmount',
    value: 0,
    title: '市场补贴'
  },
  {
    key: 'dynamicsAirdropSzpnAmount',
    value: 0,
    title: '动态空投szpn数量'
  },
  {
    key: 'staticAirdropSzpnAmount',
    value: 0,
    title: '静态空投szpn数量'
  },
  {
    key: 'szpnExchangeScrollAmount',
    value: 0,
    title: 'szpn兑换scroll数量'
  }
]);

const doQueryDataVo = async () => {
  const res = await queryDataVo();
  console.log(res);
  statisticObj.value.forEach((item) => {
    if (res.data[item.key]) {
      item.value = res.data[item.key];
    }
  });
  // statisticObj.value[0].value = Number(res.data.todayWithdrawUsdtAmount)
  // statisticObj.value[1].value = Number(res.data.todayWithdrawAleoAmount)
  // statisticObj.value[2].value = Number(res.data.totalWithdrawAleoAmount)
  // statisticObj.value[3].value = Number(res.data.totalWithdrawUsdtAmount)
  // statisticObj.value[4].value = Number(res.data.todayMiningAleAmount)
  // statisticObj.value[5].value = Number(res.data.totalMiningAleAmount)
  // statisticObj.value[6].value = Number(res.data.totalFeeUsdtAmount)
  // statisticObj.value[7].value = Number(res.data.totalFeeAleoAmount)
  // statisticObj.value[8].value = Number(res.data.todayUserAmount)
  // statisticObj.value[9].value = Number(res.data.newUserNum)
  // statisticObj.value[10].value = Number(res.data.oldUserNum)
  // statisticObj.value[11].value = Number(res.data.totalUserAmount)
  // statisticObj.value[12].value = Number(res.data.todayInvestAmount)
  // statisticObj.value[13].value = Number(res.data.totalInvestAmount)
  // statisticObj.value[14].value = Number(res.data.totalComputility)
  // statisticObj.value[15].value = Number(res.data.oldUserComputility)
  // statisticObj.value[16].value = Number(res.data.marketAllowanceAmount)
};

const doQueryUserVoList = async () => {
  const res = await queryUserVoList();
  let data = [];
  res.data.forEach((item) => {
    data.push({
      value: item.num,
      name: item.location
    });
  });
  initZhu(data);
};

let pageNum = ref(1);
let total = ref(0);
const doQueryDaily = async () => {
  const rows = await doQueryDailyFun();
  console.log(rows);
  initDaily(rows);
};

const doQueryDailyFun = async () => {
  const res = await queryDaily({
    pageSize: 10,
    pageNum: pageNum.value
  });
  total.value = res.total;
  return res.rows;
};

const initDaily = (data) => {
  var chartDom = document.getElementById('myChartMain')!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  // x轴
  let xData = [];
  let yData = [];
  data.forEach((item) => {
    if (item.date) {
      xData.push(parseTime(item.date, '{y}-{m}-{d}'));
      yData.push(item.amount);
    }
  });
  option = {
    title: {
      show: true,
      text: '每日投资统计',
      left: 'center',
      color: '#000'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '10px',
      top: '40px',
      right: '10px',
      bottom: '4%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel: {
        interval: 'auto',
        rotate: 50,
        show: true,
        splitNumber: 15,
        textStyle: {
          fontSize: '12'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        //formatter: '{value} %'
        show: true,
        textStyle: {
          fontSize: '12'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      }
    },
    dataZoom: [
      {
        type: 'slider', // 使用滑动条形式的 dataZoom 组件
        start: 0, // 左侧在数据窗口范围的起始百分比, 0 表示从头开始
        end: 100 // 右侧在数据窗口范围的结束百分比, 100 表示到尾部结束
      }
    ],
    series: [
      {
        name: '投资量',
        data: yData,
        type: 'bar',
        label: {
          show: true,
          fontSize: '10',
          position: 'top' // 数值显示的位置
        }
      }
    ]
  };

  option && myChart.setOption(option);

  // 监听 dataZoom 组件的 drag 事件来更新数据
  myChart.on('datazoom', async function (event) {
    // 获取 dataZoom 组件的 start 和 end 值

    var end = event.end;

    // 判断到顶
    if (yData.length < total.value) {
      if (end == 100) {
        // 下拉加载
        pageNum.value++;
        // 根据 start 和 end 的值来获取新的数据集
        var newData = await doQueryDailyFun();
        console.log(newData);
        newData.forEach((item) => {
          if (item.date) {
            xData.push(parseTime(item.date, '{y}-{m}-{d}'));
            yData.push(item.amount);
          }
        });

        // 更新 series 中的数据
        myChart.setOption({
          xAxis: {
            data: xData
          },
          series: [
            {
              data: yData
            }
          ]
        });
      }
    }
  });
};

const username = ref(null);
onMounted(() => {
  doQueryDataVo();
  doQueryUserVoList();
  doQueryDaily();
  username.value = localStorage.getItem('username');
});
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
